<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>照明系统</title>
    <!--引用自己的样式文件-->
    <link rel="stylesheet/less" type="text/css" href="css/index.less">
    <!--引用less.js-->
    <script type="text/javascript" src="lib/less/less.min.js"></script>
</head>

<body>
    <div class="container">
        <div class="controls">
            <ul class="state" id="imgBox">
                <li><a href="javascript:;" id="memory">运行</a>
                    <img id="lighting" src="./images/green.png" alt="green">
                </li>
                <li><a href="javascript:;">关闭</a>
                    <img src="./images/black.png" alt="black">
                </li>
                <li><a href="javascript:;">掉线</a>
                    <img src="./images/white.png" alt="white">
                </li>
                <li><a href="javascript:;">故障</a>
                    <img src="./images/red.png" alt="red">
                </li>
            </ul>
            <span>选择控制分组 <b></b></span>
            <a href="javascript:;" class="target" id="save">√</a>
            <i></i>
            <a href="javascript:;" id="clear">×</a>
        </div>
        <div class="opeartion" id="opeartion">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <ol>
                注：
                <li>四种运行状态均可拖拽实现；</li>
                <li>按照文档需求完成demo，实际开发中会考虑到更多兼容与bug、优化等问题；</li>
                <li>存储技术使用的是H5中的localStorage技术，个人感觉更加轻便，性能更好；</li>
                <li>由于使用了less，若您直接从本地打开文件呈现乱码，请从服务端打开，若使用网址打开，请忽略。</li>
            </ol>
        </div>
    </div>
</body>
<!--引入自己的js-->
<script src="./js/index.js"></script>

</html>
